/**
 * Created by wtuser on 2016/11/2.
 */
app.animation(".view-slide-in", function(){
    return {
        enter : function(element, done){
            element.css({
                opacity : .5,
                position : "relative",
                top : "0px",
                left : "50px"
            }).animate({top : 0, left : 0, opacity : 1}, 1e3, done)
        }
    }
}), app.animation(".panle-slide-in", function(){
    return {
        enter : function(element, done){
            element.css({
                opacity : 1,
                position : "relative",
                top : "0px",
                left : "2000px"
            }).animate({top : 0, left : 0, opacity : 1}, 500, done)
        },
        leave : function(element, done){
            element.css({
                position : "relative",
                top : 0,
                left : 0,
                opacity : 1
            }), element.animate({top : 0, left : 2e3, opacity : 1}, done)
        }
    }
}), app.animation(".fade", function(){
    return {
        enter : function(element, done){
            element.css({
                opacity : 0,
                position : "relative",
                top : "0px",
                left : "0px"
            }).animate({top : 0, left : 0, opacity : 1}, 500, done)
        },
        leave : function(element, done){
            element.css({
                position : "relative",
                top : 0,
                left : 0,
                opacity : 1
            }), element.animate({top : 0, left : 0, opacity : 0}, done)
        }
    }
}),
    //ng-repeat 动画
    app.animation(".repeat-animation", function(){
        return {
            enter : function(element, done){
                // console.log("entering...");
                element.width();
                element.css({position : "relative", left : -10, opacity : 0}), element.animate({
                    left : 0,
                    opacity : 1
                }, done)
            },
            leave : function(element, done){
                element.css({
                    position : "relative",
                    left : 0,
                    opacity : 1
                }), element.animate({left : -10, opacity : 0}, done)
            },
            move : function(element, done){
                element.css({left : "2px", opacity : .5}), element.animate({
                    left : "0px",
                    opacity : 1
                }, done)
            }
        }
    }),
    //用ng-hide指令实现元素的渐隐渐显效果
    app.animation(".hide-animation", function(){
        return {
            beforeAddClass : function(element, className, done){"ng-hide" === className ? element.animate({opacity : 0}, 500, done) : done()},
            removeClass : function(element, className, done){"ng-hide" === className ? (element.css("opacity", 0), element.animate({opacity : 1}, 500, done)) : done()}
        }
    });